class ShopCarts {
    constructor() {
        this.init();
    }

    init() {
        if (!this.ShowOrHide()) {
            this.renderCarts();
        }
        // 点击+ - 函数
        this.handleClick();
        // 计算总共商品数量 函数
        this.sumCarts();
        // 点击删除 函数
        this.handleDelete();
        // 全选框/复选框 实现
        this.handleCheckbox();
    }

    handleCheckbox() {
        $(".hookCheckAllCheckbox").click($.proxy(function(e) {
            if ($(".hookCheckAll").hasClass("checkbox-checked")) { // 如果目前状态为全选，则取消
                $(".hookCheckAll").removeClass("checkbox-checked");
                $(".hookProdList li").removeClass("item-checked");
                $(".account-btn").addClass("disabled");
            } else {
                $(".hookCheckAll").addClass("checkbox-checked");
                $(".hookProdList li").addClass("item-checked");
                $(".account-btn").removeClass("disabled");
            }
            this.sumCarts();
        }, this))
        $(".hookCheckbox").click($.proxy(function(e) {
            let item = $(e.target).parents(".item"); // 选中则取消，取消则选中
            if (item.hasClass("item-checked")) {
                item.removeClass("item-checked");
            } else {
                item.addClass("item-checked");
            }
            let checkAll = true;
            let checkSome = false;
            $.each($(".hookProdList li"), $.proxy(function(index, item) {
                if (!$(item).hasClass("item-checked")) {
                    checkAll = false;
                } else {
                    checkSome = true;
                }
            }, this))
            checkAll === true ? $(".hookCheckAll").addClass("checkbox-checked") : $(".hookCheckAll").removeClass("checkbox-checked");
            checkSome === true ? $(".account-btn").removeClass("disabled") : $(".account-btn").addClass("disabled");
            this.sumCarts();
        }, this))
    }

    handleDelete() {
        $(".hookToDelete").click($.proxy(function(e) {
            let targetItem = $(e.target).parents(".item");
            let id = targetItem.attr("data-cartitemid");
            targetItem.remove();
            let s = localStorage.getItem("carts"); // 取出购物车localstorage
            let la = JSON.parse(s);
            let targetIndex;
            $.each(la, function(index, item) {
                if (item.Id == id) {
                    targetIndex = index;
                }
            })
            la.splice(targetIndex, 1);
            if (la.length !== 0) {
                localStorage.setItem("carts", JSON.stringify(la));
            } else {
                localStorage.removeItem("carts");
            }
            this.sumCarts();
            this.ShowOrHide();
        }, this))
    }

    handleClick() {
        $(".count-check").on("click", "span", $.proxy(function(e) {
            if ($(e.currentTarget).hasClass("reduce")) {
                let input = $(e.currentTarget).next();
                if (input.val() == 1) return;
                else {
                    input.val(input.val() - 1);
                }
            } else if ($(e.currentTarget).hasClass("add")) {
                let input = $(e.currentTarget).prev();
                input.val(parseInt(input.val()) + 1);
            }
            this.sumCarts()
            this.saveCarts();
        }, this))
    }

    sumCarts() {
        let num = 0;
        let sum = 0;
        let checkedCount = 0;
        $.each($(".hookProdList .item"), function(index, items) {
            let price = $(items).find(".current-price").html();
            let count = $(items).find("input").val();
            num++;
            $(items).find(".hookProdTotalPrice").html(price * count);
            if ($(items).hasClass("item-checked")) {
                sum += price * count;
                checkedCount += parseInt(count);
            }
        })
        $(".total-bar .total").html(num);
        $(".hookCartTotalPrice").html(sum.toFixed(2));
        $(".hookSelectedProdNum").html(parseInt(checkedCount));
    }

    saveCarts() {
        var s = localStorage.getItem("carts"); // 取出购物车localstorage
        var la = JSON.parse(s);
        $.each(la, $.proxy(function(indexLa, itemLa) { // 遍历保存数量的改变
            $.each($(".hookProdList .item"), function(indexItem, listItem) {
                if (itemLa.Id == $(listItem).attr("data-cartitemid")) {
                    itemLa.Count = parseInt($(listItem).find("input").val());
                }
            })
        }, this))
        localStorage.setItem("carts", JSON.stringify(la));
    }

    ShowOrHide() {
        let carts = localStorage.getItem("carts"); // 取出购物车localstorage
        if (carts === null) {
            $(".showGoods").css("display", "none");
            $(".showEmpty").css("display", "block");
            return true;
        } else {
            $(".showGoods").css("display", "block");
            $(".showEmpty").css("display", "none");
            return false;
        }
    }

    // {
    //     Title: goods.Title,
    //     Id: goods.Id,
    //     Count: goods.Count,
    //     Price: goods.Price,
    //     Img: goods.Img
    // }

    renderCarts() {
        let carts = localStorage.getItem("carts");
        let cartsData = JSON.parse(carts);
        let html = "";
        $.each(cartsData, function(index, item) {
            html += `
                    <li class="item clear" data-cartitemid="${item.Id}" data-catalogid="${item.Id}">
                        <span class="check"><i class="blackfive-icon bi-checkbox hookCheckbox"></i></span>
                        <div class="check-product-info">
                            <dl class="product-info clear">
                                <dt class="pi-img"><a href="productInfo.html?${item.Price}&${item.Id}" target="_blank"><img src="${item.Img}" width="80" height="80"></a>
                                    <i class="product-icon pi-tuan"></i>
                                </dt>
                                <dd class="pi-info clear">
                                    <p class="pi-name">
                                        <em class="pi-type">  
                                            包邮包税
                                        </em> ${item.Title}
                                    </p>
                                    <div class="pi-attribute hookAttr" ismulti="">
                                        <div class="modify-wrap" style="display: none;">
                                            <span class="modify"><i class="blackfive-icon bi-modify"></i>修改</span>
                                        </div>
                                    </div>
                                    <p class="pi-icon">
                                        <span>
                                                                        <i class="logistics-icon li-pinyou"></i>
                                                                    拼邮
                                                            </span>
                                        <span><i class="logistics-icon li-tuihuo"></i>
                                                                    
                                                                    本土退货
                                                                    
                                                            </span>
                                    </p>
                                </dd>
                                <p class="product-time hkRestTime" id="prod5d37fa56860a415d2728ce69" data-time="-1"></p>
                            </dl>
                            <div class="price">
                                <p class="current-price hookCurPrice">${item.Price}</p>
                                <p class="isactivity"><i class="blackfive-icon bi-price"></i></p>
                            </div>
                            <div class="count">
                                <div class="count-check hookPurchaseNum">
                                    <span class="reduce" title="减少"><em></em></span><input type="text" readonly="readonly" value="${item.Count}"><span class="add" title="增加">+</span>
                                </div>
                            </div>
                            <div class="sum hookProdTotalPrice">${item.Price * item.Count}</div>
                            <div class="operate">
                                <p class="delete hookToDelete">删除</p>
                            </div>
                        </div>
                    </li>
                    `;
        })
        $(".hookProdList").html(html);


    }
}

new ShopCarts();